<template>
  <div id="hello" class="container wrapper">
    <h4 class="h4">{{title}}</h4><br>
    <h4 class="h4">{{explanation}}</h4><br><br>
    <button class="btn btn-lg btn-success btn-block" @click="goYibanAuth()">登录</button>
  </div>
</template>

<script>
  import API from '../config/request';
  export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        url: 'hello',
        title:"为全面贯彻党和国家教育方针，落实立德树人根本任务，" +
        "加强社会主义核心价值观教育，激励学生全面发展，引导学生自觉提高综合素质，适应当前社会对人才培养的需要，" +
        "根据学校《中国石油大学（华东）学生综合素质测评办法（试行）》及相关文件，结合学院实际，制定本办法。",
        explanation: "本办法由计算机与通信工程学院负责解释"
      }
    },
    created(){
      this.setLocalStorage()
    },
    methods:{
      setLocalStorage(){
        localStorage.setItem('studentNo', -1)
        localStorage.setItem('classId', -1)
        localStorage.setItem('identity', -1)
      },
      goYibanAuth(){
       window.location.href = "https://openapi.yiban.cn/oauth/authorize?client_id="+ API.AppID + "&redirect_uri=" + API.RedirectURL + "&display=html";
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
  .wrapper{
    width: 70%;
  }
  @media screen and (min-width:769px){
    .wrapper{
      width: 60%;
    }

  }
</style>
